<template>
  <div class="playlist">
    <div class="card">
      <div class="title">
        <h1>当前播放</h1>
        <span>({{ songnum }})</span>
      </div>
      <div class="btn" @click="$emit('toggle')">
        <div class="method">
          <img :src="item.img" alt="" />
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="list">
        <ListSong
          v-for="item in playSongList"
          :key="item.id"
          :item="item"
          @play-song="$emit('play-song', $event)"
          :selectedSong="selectedSong"
          :playingStatus="playingStatus"
          @to-del="$emit('to-del', $event)"
        ></ListSong>
      </div>
      <transition name="fade">
        <div class="prompt" v-if="playMethodCN">
          <span>{{ playMethodCN }}</span>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import ListSong from "@/components/ListSong.vue";
export default {
  props: ["playSongList", "playingStatus", "selectedSong", "playMethod"],
  data: function () {
    return {
      playMethodCN: "",
    };
  },
  components: {
    ListSong,
  },
  computed: {
    songnum() {
      return this.playSongList.length;
    },
    item() {
      switch (this.playMethod) {
        case "circulation": {
          return { img: require("../assets/coo.png"), text: "列表循环" };
        }
        case "random": {
          return { img: require("../assets/cp6.png"), text: "随机播放" };
        }
        case "sequence": {
          return { img: require("../assets/co2.png"), text: "顺序播放" };
        }
        default: {
          return { img: require("../assets/dud.png"), text: "列表循环" };
        }
      }
    },
  },
  watch: {
    playMethod(n) {
      switch (n) {
        case "circulation": {
          this.playMethodCN = "循环播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }

        case "random": {
          this.playMethodCN = "随机播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }

        case "sequence": {
          this.playMethodCN = "顺序播放";
          setTimeout(() => {
            this.playMethodCN = "";
          }, 2000);
          break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: translateY(100vh);
}
.card-enter-active,
.card-leave-active {
  transition: all 0.5s;
}
.card-enter,
.card-leave-to {
  opacity: 0;
  transform: translateY(60vh);
}
.playlist {
  // width: 100vw;
  // height: 100vh;
  position: fixed;
  right: 50vw;
  bottom: 0;
  z-index: 10;
  .card {
    width: 95vw;
    height: 60vh;
    background-color: #fff;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 47.5vw);
    border-radius: 20px;
    padding: 5px;
    .title {
      display: flex;
      align-items: flex-end;
      padding: 10px 10px;
      padding-bottom: 0px;
      transform-origin: left;
      transform: scale(0.9);
      h1 {
        font-weight: bolder;
      }
      span {
        font-size: 12px;
        color: #aaa;
      }
    }
    .btn {
      padding: 5px 10px;
      margin-bottom: 10px;
      img {
        width: 5vw;
        vertical-align: middle;
        margin-right: 5px;
      }
      span {
        font-size: 12px;
      }
    }
    .list {
      height: calc(50vh - 15px);
      overflow-y: auto;
    }
  }
}
.prompt {
  width: calc(100vw - 20px);
  position: absolute;
  bottom: 15vh;
  // left: 0;
  display: flex;
  justify-content: center;
  span {
    display: block;
    padding: 0 5px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    color: #fff;
  }
}
</style>